<template>
  <div class="classification">
    <b-list-group>
      <b-list-group-item class="asideContent-title d-flex align-items-center pb-1">
        <b-icon icon="folder"></b-icon>
        <h2>分类</h2>
      </b-list-group-item>
      <b-list-group-item class="list-group-item-on">
        <nuxt-link to="#" class="d-flex align-items-center justify-content-between">
          <h6 class="mb-0">JavaScript</h6>
          <span>4篇</span>
        </nuxt-link>
      </b-list-group-item>
    </b-list-group>
  </div>
</template>

<script>
export default {

}
</script>

<style>
  .classification {
    margin-top: 25px;
  }
  .asideContent-title .b-icon {
    font-size: 19px;
    margin-right: 6px;
    color: var(--base-text-color);
  }
  .classification a {
    font-size: 14px;
    color: var(--other-text-color);
  }
  .classification a h6 {
    font-weight: normal;
  }
  .classification .list-group-item-on {
    padding: 8px 0;
    margin: 4px 20px;
    transition: all .6s;
  }
  .classification .list-group-item-on:hover {
    padding: 8px 12px;
    border-radius: 1rem;
    background-color:var(--primary);
  }
  .classification .list-group-item-on:hover a {
    color: #fff;
  }
  
</style>